<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>UserInfo</title>
    <!--bootstrap静态文件-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <!--bootstrap-->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">

    </script>
    <!--bootstrap核心文件-->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="modifyUser">
    <form name="modifyUser">
        <div class="form-group">
            <label for="id">ID:</label>
            <input type="text" class="form-control" name="id" id="id" th:value="${user.getId()}" disabled>
        </div>
        <div class="form-group">
            <label for="name">name:</label>
            <input type="text" class="form-control" name="name" id="name" th:value="${user.getName()}">
        </div>
        <div class="form-group">
            <label for="pwd">Password:</label>
            <input type="text" class="form-control" name="pwd" id="pwd" th:value="${user.getPassword()}">
        </div>
        <div class="form-group">
            <label for="role">role:</label>
            <select class="form-control" name="role" id="role" th:value="${user.getRole()}">
                <option th:selected="${user.getRole()=='admin'}" value="admin">admin</option>
                <option th:selected="${user.getRole()=='user'}" value="user">user</option>
            </select>
        </div>
    </form>
    <button id="modify">ModifyUser</button>
</div>
    <script>
        function isBlank(str) {
            if (str == "" || str == null || str == undefined){
                return true;
            }else {
                return false;
            }
        }
        $("#modify").click(function () {
            var id = $("#id").val();
            var name = $("#name").val();
            var password = $("#pwd").val();
            var role = $("#role").val();
            //判断是否有未填写项
            if (isBlank(name) || isBlank(password) || isBlank(role)){
                window.confirm("请完善信息");
            }else {
                var param = {
                    "id":id,
                    "name":password,
                    "password":password,
                    "role":role
                };
                $.ajax({
                    url:"/modifyUser",
                    data:param,
                    async:true,
                    success:function f(result) {
                        window.confirm(result.msg);
                        location.href="users";
                    }
                });
            }
        });
    </script>
</body>
</html>